<template>
  <div class="main-content">
    <div class="account_settings_info_left">
      <div class="account_settings_info">
        <span class="account_settings_info_name">控制台</span>
      </div>
      <a-menu mode="inline" :selectedKeys="selectedKeys" type="inner" class="accout_menu" @openChange="onOpenChange">
        <a-menu-item key="/console/gpu-cloud-serve">
          <router-link :to="{ name: 'console/gpu-cloud-serve' }">
            <span class="menu_account_title">GPU云服务器</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="/console/public-cloud-serve">
          <router-link :to="{ name: 'console/public-cloud-serve' }">
            <span class="menu_account_title">通用云服务器</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="/console/ip-serve">
          <router-link :to="{ name: 'console/ip-serve' }">
            <span class="menu_account_title">弹性公网IP</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="/console/security">
          <router-link :to="{ name: 'console/security' }">
            <span class="menu_account_title">安全</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </div>
    <div class="account_settings_info_right">
      <!-- <a-card class="account_settings_info_card"> -->
      <route-view></route-view>
      <!-- </a-card> -->
    </div>
  </div>
</template>

<script>
import { RouteView } from '@/layouts'
import { mapState } from 'vuex'
export default {
  components: {
    RouteView
  },
  data() {
    return {
      openKeys: [],
      selectedKeys: []
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      currentUser: state => state.user.info
    })
  },
  watch: {
    $route(val) {
      this.updateMenu()
      console.log(val)
    }
  },
  mounted() {
    this.updateMenu()
  },
  methods: {
    onOpenChange(openKeys) {
      this.openKeys = openKeys
    },
    updateMenu() {
      const routes = this.$route.matched.concat()
      this.selectedKeys = [routes.pop().path]
    }
  }
}
</script>

<style lang="less" scoped>
.main-content {
  width: calc(100vw - 60px);
  height: calc(100vh - 60px);
  padding-bottom: 14px;
  display: flex;
  justify-content: flex-start;
}
.account_settings_info_left {
  width: 160px;
  background-color: #fff;
  .account_settings_info {
    height: 98px;
    padding: 30px 53px 50px 53px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .account_settings_info_name {
      height: 18px;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #333333;
    }
  }
}
.accout_menu {
  background-color: #fff;
  width: 160px;
  .menu_account_title {
    height: 14px;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 14px;
    letter-spacing: 0px;
    color: #333333;
  }
  /deep/.ant-menu-item {
    width: 160px;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    margin: 0;
  }
  /deep/.ant-menu-item > a {
    height: 100%;
    display: block;
    color: #dee7fe;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  /deep/.ant-menu-item-selected {
    background-color: #f0f6fe;
  }
  /deep/.ant-menu-item::after {
    position: absolute;
    top: 16px;
    right: 0;
    bottom: 0;
    height: 16px;
    border-right: 3px solid #33b0ed;
    content: '';
  }
}
.account_settings_info_right {
  width: calc(100vw - 160px);
  padding-left: 14px;
  .account_settings_info_title {
    width: 100%;
    height: 100%;
    line-height: 60px;
    padding-left: 30px;
    //  background-color: #ffffff;
    color: #333333;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
  }
  .account_settings_info_card {
    //  background-color: #ffffff;
    /deep/.ant-card-body {
      padding-left: 30px;
      padding-right: 30px;
      zoom: 1;
    }
  }
}
</style>
